---
title: iPhone
date: 2024-09-01
description: A mockup of the iPhone
author: dillionverma, Yeom-JinHo
published: true
---

<ComponentPreview name="iphone-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/iphone
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="iphone" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### With Image

<ComponentPreview name="iphone-demo-2" />

### With Video

<ComponentPreview name="iphone-demo-3" />

## Usage

```tsx showLineNumbers
import { Iphone } from "@/components/ui/iphone"
```

```tsx showLineNumbers
<Iphone />
```

## Props

| Prop        | Type                  | Default | Description                                       |
| ----------- | --------------------- | ------- | ------------------------------------------------- |
| `src`       | `string`              | `-`     | The source of the image to display                |
| `videoSrc`  | `string`              | `-`     | The source of the video to display                |
| `className` | `string`              | `-`     | Additional classes applied to the wrapper `<div>` |
| `style`     | `React.CSSProperties` | `-`     | Inline styles applied to the wrapper `<div>`      |

## Notes

- Sizing: width and height props have been removed. The size is controlled by the wrapper `<div>`. The component enforces the aspect ratio 433/882.
- Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
- HTML Attributes: The Iphone component accepts all standard HTMLDivElement props.
- iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.
